<template>
  <div class="container">
    <el-table
      :data="tabledata.tableAllData"
      style="width: 100%; margin: 0 auto"
      :header-cell-style="getRowClass"
      :row-class-name="tableRowClassName"
      :row-style="{ fontSize: '12px', height: '10px' }"
      :cell-style="{ padding: '8px' }">
      <el-table-column type="index" align="center" width="60">
        <template slot="header">
          <div>序号</div>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tabledata.formHead"
        :key="index"
        align="center"
        >
        <template slot="header">
          <div>{{Object.values(item)[0]}}</div>
        </template>
        <template slot-scope="scope">
          <div v-if="scope.row.productType !== '方子'">
            <div v-if="!checkIsShowCylinder(Object.keys(item)[0]) && !whichEdit(scope.row._id)">
              <el-select size="mini" v-if="Object.keys(item)[0] === 'isCertified'" v-model="scope.row[Object.keys(item)[0]]" @change="computedState($event, scope.row)">
                <el-option
                  v-for="itemo in options"
                  :key="itemo.value"
                  :label="itemo.label"
                  :value="itemo.value">
                </el-option>
              </el-select>
              <el-input v-else size="mini" @focus="delInside" :disabled="scope.row.isdisabled" v-model="scope.row[Object.keys(item)[0]]" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
            </div>
            <div v-else>{{scope.row[Object.keys(item)[0]]}}</div>
          </div>
          <div v-else>
            <div v-if="!checkIsShowSquare(Object.keys(item)[0]) && !whichEdit(scope.row._id)">
              <el-select size="mini" v-if="Object.keys(item)[0] === 'isCertified'" v-model="scope.row[Object.keys(item)[0]]" @change="computedState($event, scope.row)">
                <el-option
                  v-for="itemo in options"
                  :key="itemo.value"
                  :label="itemo.label"
                  :value="itemo.value">
                </el-option>
              </el-select>
              <el-input v-else size="mini" @focus="delInside" :disabled="scope.row.isdisabled" v-model="scope.row[Object.keys(item)[0]]" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
            </div>
            <div v-else>{{scope.row[Object.keys(item)[0]]}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-for="item in tabledata.formHeadComplex"
        :key="item.name"
        :label="item.translate"
        align="center">
          <el-table-column
            v-for="k in item.children"
            :key="k.name"
            :label="k.translate"
            align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.productType !== '方子'">
                  <div v-if="!checkIsShowCylinder(k.name) && !whichEdit(scope.row._id)">
                    <el-input @focus="delInside" size="mini" :disabled="scope.row.isdisabled" v-model="scope.row[k.name]" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
                  </div>
                  <div v-else>{{scope.row[k.name]}}</div>
                </div>
                <div v-else>
                  <div v-if="!checkIsShowSquare(k.name) && !whichEdit(scope.row._id)">
                    <el-input @focus="delInside" size="mini" :disabled="scope.row.isdisabled" v-model="scope.row[k.name]" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
                  </div>
                  <div v-else>{{scope.row[k.name]}}</div>
                </div>
              </template>
          </el-table-column>
      </el-table-column>
      <slot name="densitys"></slot>
      <slot name="status"></slot>
      <slot name="checkMans"></slot>
      <slot name="operation"></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'tableQuality',
  data () {
    return {
      needEditWordCylinder: [
        'weight', // 重量
        'height', // 高度
        'diameter', // 直径
        'isCertified', // 正品
        'resistivity', // 电阻率
        'weightReductionRatio' // 缩重比
      ],
      needEditWordSquare: [
        'weight', // 重量
        'heightSquare', // 高度
        'length', // 长度
        'width', // 宽度
        'isCertified', // 正品
        'resistivity', // 电阻率
        'weightReductionRatio' // 缩重比
      ],
      needEditWordOnlyH: [
        'weight', // 重量
        'isCertified', // 正品
        'resistivity', // 电阻率
        'weightReductionRatio' // 缩重比
      ],
      beingChoose: null,
      options: [
        {
          value: '正品',
          label: '正品'
        },
        {
          value: '废品',
          label: '废品'
        }
      ]
    }
  },
  props: {
    tabledata: {
      type: Object,
      require: true
    },
    needEdit: {
      type: Array,
      require: true
    },
    onlyEditHeight: {
      type: Boolean
    }
  },
  computed: {
    checkIsShowCylinder () {
      return function (val) {
        var arrNeeds = this.onlyEditHeight ? this.needEditWordOnlyH : this.needEditWordCylinder
        if (arrNeeds.indexOf(val) === -1) {
          return true
        } else {
          return false
        }
      }
    },
    checkIsShowSquare () {
      return function (val) {
        var arrNeeds = this.onlyEditHeight ? this.needEditWordOnlyH : this.needEditWordSquare
        if (arrNeeds.indexOf(val) === -1) {
          return true
        } else {
          return false
        }
      }
    }
  },
  watch: {
    needEdit: {
      handler (newVal) {
        // console.log('newVal', newVal)
        this.beingChoose = newVal
      },
      immediate: true
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    getRowClass ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'color: rgb(63,66,84);font-weight: bold;font-size: 14px'
      } else {
        return ''
      }
    },
    // 控制某一行 编辑时高亮
    tableRowClassName ({ row, rowIndex }) {
      if (row.hightLight === true) {
        return 'editing-row'
      } else if (row.hightLight === false || row.hightLight === undefined) {
        return ''
      }
    },
    whichEdit (j) {
      if (this.beingChoose.length === 0) {
        return true
      } else {
        var arrs = []
        this.beingChoose.forEach(el => {
          arrs.push(el.rows)
        })
        if (arrs.indexOf(j) === -1) { // 没找到 36次
          return true
        } else {
          // 4次
          return false
        }
      }
    },
    delInside (val) {
      // console.log('sdad', val.target.value)
      if (val.target.value === '-') {
        val.target.value = ''
      }
    },
    computedState (val, rows) {
      console.log('envent', val, rows)
      if (val === '废品') {
        rows.isdisabled = true
        rows.numNotNeedUpdate = true // 全是 - 可以通过保存因为是废品
        rows.weight = '-'
        // rows.height = '-'
        rows.height = this.onlyEditHeight ? rows.height : '-'
        // rows.diameter = '-'
        rows.diameter = this.onlyEditHeight ? rows.diameter : '-'
        // rows.density = '-'
        rows.density = this.onlyEditHeight ? rows.density : '-'
        // rows.width = '-'
        rows.width = this.onlyEditHeight ? rows.width : '-'
        // rows.length = '-'
        rows.length = this.onlyEditHeight ? rows.length : '-'
        if (rows.status !== '成型') {
          rows.resistivity = '0'
          rows.weightReductionRatio = '0'
        }
      } else {
        rows.isdisabled = false
        rows.numNotNeedUpdate = false
      }
    }
  }
}
</script>

<style  scoped>
.container {
  .btnText {
    color: $primary;
  }
   .el-input__inner {
    width: 47%;
    padding: 0 3px;
  }
}
 .el-select-dropdown {
  min-width: 58px;
  left: 912px;
  .el-select-dropdown__item {
    line-height: 30px;
  }
}
 .el-table .editing-row {
  background: rgba(214, 216, 218, 0.39);
}
</style>
